<template>
  <basic-container>
    <avue-crud :option="option"
               :data="data"
               :search.sync="search"
               :table-loading="loading"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @sort-change="sortChange"
               @on-load="onLoad"
    >


      <template slot="menuRight">

      </template>


      <template slot-scope="scope" slot="menu">
        <el-button icon="el-icon-check" size="small" v-if="permission.
iot_group_edit" type="text" @click="handleBelongerService2(scope.row)">修改状态
        </el-button>
        <!--        <el-button icon="el-icon-check" size="small" type="text" @click="setmealProductPage(scope.row)">续费</el-button>-->
        <!-- <el-button icon="el-icon-check" v-if="permission.
iot_group_view" size="small" type="text" @click="flowpackagePage(scope.row)">充值包
        </el-button> -->
      </template>
    </avue-crud>

    <el-dialog
      title="修改卡片状态"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogServiceVisible"
      span="12"
    >
      <avue-form ref="serveForm" :option="serveOption" v-model="serveForm" @submit="serveSubmit">

      </avue-form>
    </el-dialog>

    <el-dialog
      title="卡片可续费套餐"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="setmealProductVisible"
    >
      <avue-form ref="form" :option="setmealProductOption"
                 v-model="setmealProductOption.setmealProductForm" @submit="rechargeSubmit"
                 :search.sync="setmealProductOption.setmealProductSearch">

      </avue-form>
    </el-dialog>

    <el-dialog
      title="可充值产品列表"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="flowpackageVisible"

          v-if="flowpackageVisible"
    >

      <avue-crud :option="flowpackageOption"
                 :data="flowpackageOption.data"
                 :page.sync="flowpackageOption.page"
                 @on-load="flowpackageOnLoad"

                 :search.sync="flowpackageOption.search"
                 :table-loading="flowpackageOption.loading"
                 :permission="permissionList"

                 v-model="flowpackageOption.form"
                 ref="crud"
                 @row-update="rowUpdate"
                 @row-del="rowDel"
                 @search-change="searchChange"
                 @search-reset="searchReset"
                 @selection-change="selectionChange"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 @refresh-change="refreshChange"
                 @sort-change="sortChange"


      >
        <template slot-scope="scope" slot="menu">
          <el-button icon="el-icon-check" v-if="permission.
iot_group_edit" size="small" type="text" @click="realRecharge(scope.row)">充值
          </el-button>
        </template>

      </avue-crud>

    </el-dialog>

  </basic-container>
</template>


<script>
import {
  getList,
  getDetail,
  update,
  remove,
  getExport,
  pause,
  resume,
  gprsClose,
  gprsOpen,
  overtest,
  silenceactive,
  reset,
  setmealProduct,
  flowpackage,
  recharge
} from "@/api/rb-oem/iot/iot_group";
import {mapGetters} from "vuex";
import {getToken} from "@/util/auth";
import {downloadFileExcel} from "@/util/util";

export default {
  data() {
    return {
      screenWidth: document.documentElement.clientWidth, // 屏幕宽度
      form: {},
      query: {},
      search: {},
      loading: true,
      dialogServiceVisible: false,
      setmealProductVisible: false,
      flowpackageVisible: false,
      excelBox: false,
      cardStatusList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],

      serveForm: {},
      serveOption: {
        column: [
          {
            label: "选择状态",
            labelWidth: 100,
            prop: "cardStatus",
            span: 14,
            minRows: 2,
            type: "select",
            filterable: true,
            props: {
              label: "cardStatusName",
              value: "cardStatus",
              desc: 'cardStatusDesc',
            },
            dicData: [
              /*{
                label: "未锁定",
                value: "0"
              }, {
                label: "锁定",
                value: "1"
              }*/
            ],
            rules: [
              {
                required: true,
                message: "请选择状态",
                trigger: "blur",
              },
            ],
          },
        ]
      },
      //充值列表
      flowpackageOption: {
        defaultSort: {
          prop: 'price',
          order: 'ascending'
        },
        realRecharge: {},
        form: {},
        loading: true,
       height: "calc(50vh - 50px)",
        calcHeight: 30,
        labelWidth: 200,
        tip: false,
        border: true,
        index: true,
        viewBtn: false,
        selection: true,
        searchMenuSpan: 6,
        columnBtn: false,
        searchBtn: true,
        addBtn: false,
        search: {},
        data: [],
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        column: [
          {
            label: "运营商",
            prop: "telecomOperatorName",
            // type: "input",
            sortable: true,
            viewDisplay: true,
            search: false,
            disabled: true,
          }, {
            label: "产品 ID",
            prop: "productId",
            type: "input",
            sortable: true,
            viewDisplay: true,
            search: false,
            disabled: true,
          }, {
            label: "流量包价格",
            prop: "price",
            type: "input",
            formatter: (row) => {
              return row.price + ' 元';
            },
            sortable: true,
            search: false,
            viewDisplay: true,
            disabled: true,
          }, {
            label: "产品名称",
            prop: "productName",
            type: "input",
            search: false,
            // sortable: true,
            viewDisplay: true,
            disabled: true,
          }, {
            label: "流量包大小",
            prop: "flow",
            type: "input",
            formatter: (row) => {
              return row.flow + ' MB';
            },
            search: false,
            sortable: true,
            viewDisplay: true,
            disabled: true,
          }, {
            label: "流量包类型",
            prop: "flowType",
            type: "input",
            dicData: [{
              label: "公网",
              value: "0"
            }, {
              label: "定向",
              value: "1"
            }],
            search: false,
            // sortable: true,
            viewDisplay: true,
            disabled: true,
          },
        ]
      },
      //续费列表
      setmealProductOption: {
        search: {},
        setmealProductForm: {},
        setmealProductSearch: {},
        searchMenuSpan: 6,
        searchBtn: true,
        labelWidth: 120,
        column: [
          {
            label: "唯一识别码(iccid)",
            prop: "iccid",
            type: "search",
            sortable: true,
            viewDisplay: true,
            search: true,
            appendClick: () => {
              const iccid = this.setmealProductOption.setmealProductForm.iccid
              this.getSetmealProduct(iccid);
            }
          },
          {
            label: "运营商",
            prop: "telecomOperatorName",
            // type: "input",
            sortable: true,
            viewDisplay: true,
            search: false,
            disabled: true,
          }, {
            label: "商品ID",
            prop: "productId",
            type: "input",
            sortable: true,
            viewDisplay: true,
            search: false,
            disabled: true,
          }, {
            label: "套餐年价格(元)",
            prop: "price",
            type: "input",
            sortable: true,
            search: false,
            viewDisplay: true,
            disabled: true,
          }, {
            label: "产品名称",
            prop: "productName",
            type: "input",
            search: false,
            sortable: true,
            viewDisplay: true,
            disabled: true,
          }, {
            label: "套餐流量大小(MB)",
            prop: "flow",
            type: "input",
            search: false,
            sortable: true,
            viewDisplay: true,
            disabled: true,
          }, {
            label: "套餐周期(月)",
            prop: "setmealMonths",
            type: "input",
            search: false,
            sortable: true,
            viewDisplay: true,
            disabled: true,
          }, {
            label: "套餐月价格(元)",
            prop: "monthPrice",
            type: "input",
            search: false,
            sortable: true,
            viewDisplay: true,
            disabled: true,
          },

          /*{
            label: "充值备注",
            prop: "remark",
            type: "input",
            viewDisplay: true,
          },*/

        ]
      },

      option: {
       height: "calc(50vh - 50px)",
        // span:6,
        calcHeight: 30,
        labelWidth: 200,
        tip: false,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        searchMenuSpan: 6,
        columnBtn: false,
        searchBtn: true,
        addBtn: false,
        column: [
          {
            label: "卡号码",
            prop: "msisdn",
            type: "input",
            width: 120,
            search: true,
            viewDisplay: true,
          },
          {
            label: "唯一识别码(iccid)",
            prop: "iccid",
            search: true,
            width: 180
          },
          {
            label: "用户识别码",
            prop: "imsi",
            type: "input",
            viewDisplay: true,
            hide: true,
          },
          {
            label: "设备识别码",
            prop: "imei",
            type: "input",
            hide: true,
            viewDisplay: true,
          },
          {
            label: "计费组ID",
            prop: "billingid",
            type: "input",
            search: false,
            viewDisplay: true,
          },
          {
            label: "激活日期",
            prop: "daterange",
            type: "daterange",
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
            startPlaceholder: '激活起始日期',
            endPlaceholder: '激活结束日期',
            search: true,
            searchRange: true,
            viewDisplay: false,
            hide: true,
            change: (value) => {
              if (value.value) {
                this.search.activeDateStart = value.value[0]
                this.search.activeDateEnd = value.value[1]
              } else {
                this.search.activeDateStart = ''
                this.search.activeDateEnd = ''
              }
            },
          }, {
            label: "到期日期",
            prop: "open_date",
            type: "daterange",
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
            startPlaceholder: '到期起始日期',
            endPlaceholder: '到期结束日期',
            search: true,
            searchRange: true,
            viewDisplay: false,
            hide: true,
            change: (value) => {
              if (value.value) {
                this.search.expiryDateStart = value.value[0]
                this.search.expiryDateEnd = value.value[1]
              } else {
                this.search.expiryDateStart = ''
                this.search.expiryDateEnd = ''
              }
            },
          },
          {
            label: "运营商",
            prop: "carrier",
            display: false
          },
          {
            label: "运营商",
            prop: "supplier",
            viewDisplay: true,
            hide: true,
          },
          {
            label: "套餐名称",
            prop: "setMeal",
            viewDisplay: true,
          },
          {
            label: "卡状态",
            prop: "cardStatus",
            viewDisplay: true,
            search: true,
            type: "select",
            dicData: [{
              label: "停机",
              value: "停机"
            }, {
              label: "预销号",
              value: "预销号"
            }, {
              label: "销号",
              value: "销号"
            }
              , {
                label: "待激活",
                value: "待激活"
              }
              , {
                label: "未知",
                value: "未知"
              }
              , {
                label: "正常",
                value: "正常"
              }
              , {
                label: "测试期正常",
                value: "测试期正常"
              }
              , {
                label: "测试期停机",
                value: "测试期停机"
              }
              , {
                label: "停机保号",
                value: "停机保号"
              }
            ],
          },
          {
            label: "激活状态",
            prop: "active",
            viewDisplay: true,
            search: true,
            type: "select",
            dicData: [{
              label: "激活",
              value: "激活"
            }, {
              label: "未激活",
              value: "未激活"
            },
            ],
          },
          {
            label: "出库日期",
            prop: "allotDate",
            sortable: true,
            viewDisplay: true,
            hide: true,
          },
          {
            label: "开卡日期",
            prop: "openDate",
            hide: true,
            viewDisplay: true
          },
          {
            label: "激活日期",
            prop: "activeDate",
            display: false,
          },
          {
            label: "激活日期",
            prop: "activateTime",
            viewDisplay: true,
            hide: true,
          },
          {
            label: "到期日期",
            prop: "expiryDate",
            viewDisplay: true,
          },

          {
            label: "卡类型",
            prop: "cardType",
            viewDisplay: true,
            hide: true,
          },
          {
            label: "计费组编码",
            prop: "billingCode",
            viewDisplay: true,
            hide: true,
          },
          {
            label: "计费组产品编码",
            prop: "productCode",
            viewDisplay: true,
            hide: true,
          },
          {
            label: "网络类型",
            prop: "networkType",
            viewDisplay: true,
            hide: true,
          },
          {
            label: "套餐总量",
            prop: "flowratenumber",
            viewDisplay: true,
            hide: true,
          },
          {
            // 卡片详情内的flow
            label: "当月流量",
            prop: "detailFlow",
            hide: true,
            viewDisplay: true,
          },
          {
            label: "剩余流量",
            prop: "residueFlow",
            viewDisplay: true,
            hide: true,
          },
          {
            label: "当月已用流量",
            prop: "monthflow",
            formatter: (row) => {
              return row.monthflow + ' MB'
            },
            display: false
          },
          {
            label: "当前计费周期内已用总量(截至当月)",
            prop: "flow",
            type: "input",
            formatter: (row) => {
              return row.flow + ' MB'
            },
            viewDisplay: false,
          },

          {
            label: "机卡分离锁定状态",
            prop: "islock",
            hide: true,
            dicData: [{
              label: "未锁定",
              value: "0"
            }, {
              label: "锁定",
              value: "1"
            }],
            /*            formatter: (row) => {
                          return row.islock === '0' ? '未锁定' : row.islock === '1' ? "锁定" : '暂无数据';
                        },*/
            viewDisplay: true
          },
          {
            label: "GPRS状态",
            prop: "gprsstatus",
            search: true,
            type: "select",
            dicData: [{
              label: "关闭",
              value: "0"
            }, {
              label: "开启",
              value: "1"
            }],
            /*formatter: (row) => {
              return row.gprsstatus === '0' ? '关闭' : row.gprsstatus === '1' ? "开启" : '暂无数据';
            },*/
            viewDisplay: true
          },

        ]
      },
      data: [],
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [{
          label: '模板上传',
          prop: 'excelFile',
          type: 'upload',
          drag: true,
          loadText: '模板上传中，请稍等',
          span: 24,
          propsHttp: {
            res: 'data'
          },
          tip: '请上传 .xls,.xlsx 标准格式文件',
          action: "/api/rb-oem/version/version/import"
        },
          {
            label: '模板下载',
            prop: 'excelTemplate',
            formslot: true,
            span: 24,
          }
        ]
      }
    };
  },

  mounted() {
    // 页面尺寸改变,重新渲染avue表格,避免表格错位
    window.addEventListener(
      'resize',
      () => {
        if(Math.abs(this.screenWidth - document.body.clientWidth) > 20) {
          // this.$nextTick(() => {
            this.$refs.crud.refreshTable();
            // this.$refs.flowpackageOption.form.refreshTable();
          // })
        }
        this.screenWidth = document.body.clientWidth;
      }
    )
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        // addBtn: this.vaildData(this.permission.version_add, false),
        // viewBtn: this.vaildData(this.permission.version_view, false),
        // delBtn: this.vaildData(this.permission.version_delete, false),
        // editBtn: this.vaildData(this.permission.version_edit, false)

        viewBtn: this.vaildData(this.permission.version_view, false),
        addBtn: false,
        editBtn: false,
        delBtn: false
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    realRecharge(row) {
      this.$confirm('此操作将进行充值操作,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //当前卡片与产品组合参数
        row.iccid = this.flowpackageOption.realRecharge.iccid
        recharge(row).then((res) => {
          const orderNo = res.data.data.orderNo;
          if (orderNo) {
            this.$message.success('充值成功');
          } else {
            this.$message.error('订购状态正常,但未获取到接口返回订单号,请登录物联卡后台查看订单');
          }
        }, error => {
          window.console.log(error);
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
      this.flowpackageOption.flowpackageVisible = false;

    },

    /**
     * 提交充值
     */
    rechargeSubmit(row, done) {
      recharge(row).then((res) => {
        const orderNo = res.data.data.orderNo;
        if (orderNo) {
          this.$message.success('充值成功');
        } else {
          this.$message.error('订购失败，未获取到接口返回订单号');
        }
      })
      this.setmealProductVisible = false;
      done();
    },

    /**
     * 获取卡片可续费套餐
     * @param msisdn
     */
    getSetmealProduct(iccid) {
      setmealProduct(iccid).then((res) => {
        this.setmealProductOption.setmealProductForm = res.data.data.product;
      });
    },

    /**
     * @func 提交已选归属服务商
     * @desc 提交已选归属服务商
     * */
    serveSubmit(row, done) {
      const iccid = this.selectionList[0].iccid
      const cardStatus = row.cardStatus;
      if (cardStatus == 0) {
        //停机
        pause(iccid).then((res) => {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        }, (err) => {
          console.log(err)
        });
      } else if (cardStatus == 1) {
        // 复机
        resume(iccid).then((res) => {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        }, (err) => {
          console.log(err)
        });
      } else if (cardStatus == 2) {
        // GPRS关闭
        gprsClose(iccid).then((res) => {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        }, (err) => {
          console.log(err)
        });
      } else if (cardStatus == 3) {
        // GPRS开启
        gprsOpen(iccid).then((res) => {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        }, (err) => {
          console.log(err)
        });
      } else if (cardStatus == 4) {
        // GPRS开启
        overtest(iccid).then((res) => {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        }, (err) => {
          console.log(err)
        });
      } else if (cardStatus == 5) {
        // GPRS开启
        silenceactive(iccid).then((res) => {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        }, (err) => {
          console.log(err)
        });
      } else if (cardStatus == 6) {
        // GPRS开启
        reset(iccid).then((res) => {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        }, (err) => {
          console.log(err)
        });
      }
      done();
      this.dialogServiceVisible = false;
    },

    handleBelongerService2(row) {
      this.serveForm = {
        cardStatus: '',
        $cardStatus: ''
      }
      this.selectionList = [row];
      this.dialogServiceVisible = true;
      const column = this.findObject(this.serveOption.column, "cardStatus");
      const resD = [
        {
          cardStatus: "0",
          cardStatusName: "停机",
          cardStatusDesc: "停机处于正常状态的卡"
        }, {
          cardStatus: "1",
          cardStatusName: "复机",
          cardStatusDesc: "复机处于停机状态的卡"
        }, {
          cardStatus: "2",
          cardStatusName: "GPRS关闭",
          cardStatusDesc: "关闭物联卡的 GPRS(数据服务)"
        }
        , {
          cardStatus: "3",
          cardStatusName: "GPRS开启",
          cardStatusDesc: "开启物联卡的 GPRS(数据服务)"
        }, {
          cardStatus: "4",
          cardStatusName: "结束测试期",
          cardStatusDesc: "强制结束处于测试期的资产"
        }
        , {
          cardStatus: "5",
          cardStatusName: "强制激活",
          cardStatusDesc: "激活处于待激活(沉默期)状态的资产"
        }
        , {
          cardStatus: "6",
          cardStatusName: "重置",
          cardStatusDesc: "重置处于断网状态的卡(先停机，间隔 10 分钟后复机)"
        }
      ]
      column.dicData = resD;
    },


    /**
     * 获取套餐page
     */
    /**
     * @func 获取套餐page
     * @desc 获取套餐page
     * */
    setmealProductService() {
      this.setmealProductOption.setmealProductForm = {
        flow: "",
        iccid: "",
        monthPrice: "",
        price: "",
        productId: "",
        productName: "",
        setmealMonths: "",
        telecomOperatorName: ""
      };

      this.setmealProductVisible = true;
    },

    /**
     * 处理续费
     * @param iccid
     */
    setmealProductService2(iccid) {
      this.setmealProductOption.setmealProductForm = {
        flow: "",
        iccid: iccid,
        monthPrice: "",
        price: "",
        productId: "",
        productName: "",
        setmealMonths: "",
        telecomOperatorName: ""
      };
      this.setmealProductVisible = true;
      this.getSetmealProduct(iccid);
    },

    /**
     * 续费产品列表
     * @param row
     */
    setmealProductPage(row) {
      this.setmealProductService2(row.iccid)
    },
    /**
     * 获取充值产品列表
     * @param row
     */
    flowpackagePage(row) {
      //保存本次点击的卡片
      this.flowpackageOption.realRecharge = row
      //展示充值列表
      this.flowpackageVisible = true;
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },


    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.iccid).then(res => {
          this.form = res.data.data;
          this.formatterDetail(this.form);
        });
      }
      done();
    },
    // 格式化详情数据
    formatterDetail(req) {
      req.islock = req.islock === '0' ? '未锁定' : req.islock === '1' ? "锁定" : '暂无数据';
      req.gprsstatus = req.gprsstatus === '0' ? '关闭' : req.gprsstatus === '1' ? "开启" : '暂无数据';
      req.flowratenumber = req.flowratenumber + ' MB';
      req.detailFlow = req.flow + ' MB';
      req.residueFlow = req.residueFlow + ' MB';
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        // this.loading = false;
        this.selectionClear();
        this.$forceUpdate()
      }, () => {
        this.page.total = 0;
        this.selectionClear();
        this.$forceUpdate()
        this.loading = false;
        this.data = [];
      });
      this.loading = false;
    },
    onLoadold(page, params = {}) {
      this.loading = true;
      if (params.iccid != null) {
        getDetail(params.iccid).then(res => {
          const data = res.data.data;
          data.carrier = data.supplier;
          this.page.total = data != null ? 1 : 0;
          this.data = [data];
          this.selectionClear();
          this.$forceUpdate()
        }, () => {
          this.page.total = 0;
          this.selectionClear();
          this.$forceUpdate()
          this.loading = false;
          this.data = [];
        })
      } else {
        getList(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query)
        ).then(res => {
          const data = res.data.data;
          this.page.total = data.page.totalCount;
          this.data = data.cards;
          // this.loading = false;
          this.selectionClear();
          this.$forceUpdate()
        }, () => {
          this.page.total = 0;
          this.selectionClear();
          this.$forceUpdate()
          this.loading = false;
          this.data = [];

        });
      }
      this.loading = false;
    },
    flowpackageOnLoad(page, params = {}) {
      this.flowpackageOption.loading = true;
      flowpackage(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then(res => {
        const data = res.data.data;
        this.flowpackageOption.page.total = data.products.length;
        this.flowpackageOption.data = data.products;
        this.flowpackageOption.loading = false;

        // this.selectionClear();
        // this.$forceUpdate()
      });
    },
    //导入
    handleImport() {
      this.excelBox = true;
    },
    // 导出
    handleExport() {
      // let exQuery = ``;
      this.$confirm("是否导出用户数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let exq = {
          appType: this.search.appType,
          updateType: this.search.updateType,
          content: this.search.content,
          version: this.search.version
        }
        getExport(exq).then((res) => {
          downloadFileExcel(res);
        }),
          (error) => {
            window.console.log(error);
          }
      });
    },
    // 模板
    handleTemplate() {
      window.open(`/api/rb-oem/iot/iot/export-template?${this.website.tokenHeader}=${getToken()}`);
    },
    uploadAfter(res, done) {
      this.excelBox = false;
      this.refreshChange();
      done();
    },
    sortChange(val) {
      if (val.order == "ascending") {
        //正序
        this.query.ascs = val.prop
        this.query.descs = ""
      } else {
        //倒序
        this.query.descs = val.prop
        this.query.ascs = ""
      }
      this.refreshChange();
    }
  }
};
</script>

<style>
</style>
